<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>

  <fmt:setBundle basename="ApplicationMessage" />
  <fmt:setLocale value="zh_CN" />

  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
  <link href="${ctx.resource}/css/select2.css" rel="stylesheet">
  <link href="${ctx.resource}/css/select2-bootstrap.css" rel="stylesheet">
  <title>服务商详情 - 租房宝金融管理平台</title>
  
</head>
<body>

  <%@ include file="/WEB-INF/include/header.jsp"%>

  <%@ include file="/WEB-INF/include/menu.jsp"%>

  <div class="container main-content">

    <div class="panel panel-default earth-panel earth-panel-layout">

      <div class="panel-heading">
        <ol class="breadcrumb">
          <li><a href="${ctx}/users">系统管理</a></li>
          <li class="active">合作机构</li>
        </ol>
      </div>

      <div class="panel-body">

        <div
          class="col-xs-2 earth-panel-layout-left no-horizontal-padding">
          <%@ include file="/WEB-INF/include/submenu.jsp"%>
        </div>

        <div class="col-xs-10 earth-panel-layout-right">

          <div class="earth-breadcrumb-wrapper">
            <div class="earth-breadcrumb clearfix">
              <h2>
                <i class="glyphicon glyphicon-fire" title="服务商"></i>&nbsp;&nbsp;<span>合作机构&nbsp;-&nbsp;服务商&nbsp;-&nbsp;详情</span>
              </h2>
            </div>
          </div>

          <c:if test="${not empty infoMessage}">
            <div class="alert alert-success alert-dismissable alert-fade top-margin-10 text-align-center">
              <button type="button" class="close" data-dismiss="alert">&times;</button>
              <i class="glyphicon glyphicon-info-sign"></i>&nbsp;&nbsp;
              <fmt:message key="${infoMessage}" />
            </div>
          </c:if>
          
          <div class="col-md-12 form-horizontal">
            <div class="earth-breadcrumb-wrapper">
              <ul class="nav nav-pills earth-breadcrumb-nav">
                <li class="active"><a href="javascript: void(0)" data-toggle="tab" data-target="#app-info" data-loaded="true">基本信息</a></li>
              </ul>
            </div>
            
            <!-- Tab panes -->
            <div class="tab-content">
            
              <div class="tab-pane fade active in" id="app-info">
              
                <div class="form-group demo2do-form-group no-bottom-border no-hover vertical-padding-10">
                  <label class="col-xs-2 control-label">服务商名称</label>
                  <div class="pull-left width-30-percent">
                    <p class="form-control-static">${app.name}</p>
                  </div>
                  <label class="col-xs-2 control-label">AppId</label>
                  <div class="pull-left width-30-percent">
                    <p class="form-control-static">${app.appId}</p>
                  </div>
                </div>
                
                <div class="form-group demo2do-form-group no-bottom-border no-hover vertical-padding-10">
                  <label class="col-xs-2 control-label">Host</label>
                  <div class="pull-left width-30-percent">
                    <p class="form-control-static">${app.host}</p>  
                  </div>
                   <label class="col-xs-2 control-label">AppSecret</label>
                  <div class="pull-left width-30-percent">
                    <p class="form-control-static">${app.appSecret}</p>
                  </div>
                </div>
                
              </div>
              
            </div>
            
          </div>
          
          <div class="col-md-12 top-margin-20 form-horizontal">
            <div class="earth-breadcrumb-wrapper">
              <ul class="nav nav-pills earth-breadcrumb-nav">
                <li class="active"><a href="javascript: void(0)" data-toggle="tab" data-target="#app-account" data-loaded="true">账户信息</a></li>
              </ul>
              <div id="project-data-operation" style="position: absolute; right: 0px; top: 0px; margin-top: 10px; margin-right: 10px;">
                <a href="${ctx}/apps/${app.id}/account/${account.id}/edit" data-target="#" data-toggle="modal">编辑账户</a>
              </div>
            </div>
            
            <!-- Tab panes -->
            <div class="tab-content">
            
              <div class="tab-pane fade active in" id="#app-account">
              
                <div class="form-group demo2do-form-group no-bottom-border no-hover vertical-padding-10">
                  <label class="col-xs-2 control-label">账户名称</label>
                  <div class="pull-left width-60-percent">
                    <p class="form-control-static">${account.name}</p>
                  </div>              
                </div> 
                
                <div class="form-group demo2do-form-group no-bottom-border no-hover vertical-padding-10">
                  <label class="col-xs-2 control-label">Logo</label>
                  <div class="pull-left width-60-percent">
                    <p class="form-control-static"><span><img src="${ctx.upload}/${account.logo}" height="100"></span></p>
                  </div>              
                </div>
                
                <div class="form-group demo2do-form-group no-bottom-border no-hover vertical-padding-10">
                  <label class="col-xs-2 control-label">Header</label>
                  <div class="pull-left width-60-percent">
                    <p class="form-control-static"><span><img src="${ctx.upload}/${account.header}" height="100"></span></p>
                  </div>              
                </div>              
                
              </div>
              
            </div>
            
          </div>
          
          <div class="col-md-12 top-margin-20 form-horizontal">
            <div class="earth-breadcrumb-wrapper">
              <ul class="nav nav-pills earth-breadcrumb-nav">
                <li class="active"><a href="javascript: void(0)" data-toggle="tab" data-target="#app-payment-config" data-loaded="true">支付配置</a></li>
              </ul>
            </div>
            
            <!-- Tab panes -->
            <div class="tab-content">
            
              <div class="tab-pane fade active in" id="#app-payment-config">
              
                <table class="table table-striped demo2do-table bottom-margin-20">
                  <thead>
                    <tr>
                      <th>序号</th>
                      <th>参数名称</th>
                      <th>参数值</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <c:forEach var="appPaymentParam" items="${paymentParams}" varStatus="status">
                      <tr>
                        <td>${status.index + 1}</td>
                        <td>${appPaymentParam.name}</td>
                        <td>${appPaymentParam.value}</td>
                        <td>
                          <a href="${ctx}/apps/${app.id}/payment-params/${appPaymentParam.id}/edit" class="hover-no-text-decoration" data-toggle="modal" data-target="#" title="编辑">编辑</a>&nbsp;                                                   
                        </td>
                      </tr>
                    </c:forEach>
                  </tbody>
                </table>       
                
              </div>
              
            </div>
            
          </div>
          
          <div class="col-md-12 top-margin-20 form-horizontal">
            <div class="earth-breadcrumb-wrapper">
              <ul class="nav nav-pills earth-breadcrumb-nav">
                <li class="active"><a href="javascript: void(0)" data-toggle="tab" data-target="#app-service-config" data-loaded="true">服务配置</a></li>
              </ul>
            </div>
            
            <!-- Tab panes -->
            <div class="tab-content">
            
              <div class="tab-pane fade active in" id="#app-service-config">
              
                <table class="table table-striped demo2do-table bottom-margin-20">
                  <thead>
                    <tr>
                      <th>序号</th>
                      <th>参数名称</th>
                      <th>url</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <c:forEach var="serviceConfig" items="${serviceConfigs}" varStatus="status">
                      <tr>
                        <td>${status.index + 1}</td>
                        <td>${serviceConfig.name}</td>
                        <td>${serviceConfig.url}</td>
                        <td>
                          <a href="${ctx}/apps/${app.id}/service-configs/${serviceConfig.id}/edit" class="hover-no-text-decoration" data-toggle="modal" data-target="#" title="编辑">编辑</a>&nbsp;                                                   
                        </td>
                      </tr>
                    </c:forEach>
                  </tbody>
                </table>       
                
              </div>
              
            </div>
            
          </div>
          
                <div class="col-md-12 top-margin-20 form-horizontal">
            <div class="earth-breadcrumb-wrapper">
              <ul class="nav nav-pills earth-breadcrumb-nav">
                <li class="active"><a href="javascript: void(0)" data-toggle="tab" data-target="#app-service-config" data-loaded="true">支付应用配置</a></li>
              </ul>
            </div>
            <div class="row">
            			<div class="col-md-2 col-md-offset-10">
							<button class="btn btn-primary app-particles-add">新增</button>
						</div>
            </div>
            
            <!-- Tab panes -->
            <div class="tab-content">
            
              <div class="tab-pane fade active in" id="#app-service-config">
              
                <table class="table table-striped demo2do-table bottom-margin-20">
                  <thead>
                    <tr>
                      <th>序号</th>
                      <th>服务商名称</th>
                      <th>服务名称</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <c:forEach var="appParticle" items="${appParticles}" varStatus="status">
                      <tr particle-id = "${appParticle.id }" particalUniqueId = "${appParticle.uniqueParticalId }" >
                        <td>${status.index + 1}</td>
                        <td>${app.name}</td>
                        <td>${data.getParticalName(appParticle.uniqueParticalId)}</td>
                        <td>
                          <a href="javascript:void(0)" class="hover-no-text-decoration app-particel-delete">删除</a>&nbsp;
                          <a href="javascript:void(0)" class="hover-no-text-decoration app-config-sync">同步配置</a>&nbsp;
                        </td>
                      </tr>
                    </c:forEach>
                  </tbody>
                </table>     
                
              </div>
              
            </div>
            
          </div>

        </div><!-- layout right -->

      </div><!-- panel body -->

    </div><!-- panel layout -->
    
    <!-- partical model  begin -->
  <div class="modal fade in" id="partical-model" role="dialog" tabindex="-1" aria-labelledby="dialoglabel" aria-hidden="true" partical-uniqueid="${partical.uniqueParticalId }">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="关闭"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="dialoglabel">配置</h4>
			</div>
			<div class="modal-body">
				 <div class="row">
		           <div class = "col-md-2 col-md-offset-2">
		           		<label>通道名称</label>
		           </div>
					<div class="col-md-3">
							<select class="form-control" name="partical">
				                      	<c:forEach var="partical" items="${particals}">
			                      				<option value="${partical.uniqueParticalId }">
			                      					${partical.particalName }
			                      				</option>
			                      		
				                      	</c:forEach>
			             	</select>
						</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default close-dialog" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary app-particles-save" data-dismiss="modal">保存</button>
			</div>
		</div>
	</div>
  </div><!-- partical model end -->
  
    <!-- dialog begin -->
  <div class="modal fade in bs-example-modal-sm" id="dialog" role="dialog" tabindex="-1" aria-labelledby="dialoglabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close close-dialog" aria-label="关闭" ><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="dialoglabel">提示</h4>
			</div>
			<div class="modal-body">
				<p></p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default close-dialog app-partical-add">关闭</button>
			</div>
		</div>
	</div>
  </div><!-- dialog end -->
    

  </div><!-- main content -->

  <%@ include file="/WEB-INF/include/script.jsp"%>
  <script src="${ctx.resource}/js/bootstrap-switch.min.js"></script>
  <script src="${ctx.resource}/js/bootstrap-modal-trigger.js"></script>
  <script src="${ctx.resource}/js/bootstrap.validate.js"></script>
  <script src="${ctx.resource}/js/bootstrap.validate.en.js"></script>
  <script src="${ctx.resource}/js/bootstrap-alert-fade-trigger.js"></script>
  <script src="${ctx.resource}/js/earth-preupload.js"></script>
  <script src="${ctx.resource}/js/select2.min.js"></script>
  <script src="${ctx.resource}/js/select2_locale_zh-CN.js"></script>

  <script>
  $(function(){
  		
 		$(".app-particles-add").click(function(){
 		
  			 $("#partical-model").modal();
  			 
  		 });
 		
   		 $(".app-particles-save").click(function(){
   			 
   			 var particalUniqueId = $("select[name='partical']").val();
   			 
   			 var createAppParticleUrl = '${ctx}/particalsystem/create-app-particles';
   			 
 			 $.post(createAppParticleUrl,{
 				 
 				appId:'${app.appId}',
 				
 				uniqueParticalId:particalUniqueId
 				 
 			 }).done(function(data){
 				 
 				 var message = $.parseJSON(data).message;
   				 
   				 resultHandler(message,true);
 				 
 			 });
   			 
   		 });
   		 
   		 $(".app-particel-delete").click(function(){
   			 
   			 var particleId = $(this).parents("tr").attr("particle-id");
   			 
   			 $.post('${ctx}/particalsystem/delete-app-particles',{
   				 
   				appParticleId :particleId
   				
   			 }).done(function(data){
   				 
   				 var message = $.parseJSON(data).message;
   				 
   				 resultHandler(message,true);
   				 
   			 })
   			 
   		 });
 		$(".app-config-sync").click(function(){
   			 
   			 var particalUniqueId = $(this).parents("tr").attr("particalUniqueId");
   			 
   			 $.post('${ctx}/particalsystem/sync-app-config',{
   				 
   				particalUniqueId : particalUniqueId,
   				appId:'${app.appId}'
   				
   			 }).done(function(data){
   				 
   				 var message = $.parseJSON(data).message;
   				 
   				 resultHandler(message,true);
   				 
   			 })
   			 
   		 });
 		var resultHandler = function(message,isReload){
  			 
			 $('#dialog').find('p').text(message).end().modal();
			 
			 $('#dialog .close-dialog').click(function(){
				 
				 $('#dialog').modal('hide');
				 
				 if(isReload){
				 
					 window.location.reload();
				};
			
			 });
  		 };
  	});
  </script>

</body>
</html>
